<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <el-radio-group v-model="activetab" size="large" @change="ChangeHandler">
                    <el-radio-button label="plan">采收计划</el-radio-button>
                    <el-radio-button label="record">采收记录</el-radio-button>
                </el-radio-group>
                <div>
                    <el-button class="button" text style="background: #E28450;"
                        @click="(router.push({ name: 'add' }))">添加采收计划</el-button>
                    <el-button class="button" text style="background: #E28450;"
                        @click="(router.push({ name: 'addrecord' }))">添加采收记录</el-button>
                    <el-button class="button" text style="background: #368B90;"
                        @click="((data = Recorddatas), router.push({ name: 'statistics' }))">采收统计</el-button>
                </div>
            </div>
        </template>
        <RouterView>
            <template #default="{ Component }">
                <component :is="Component" :data="data" @save="addPlanSaveHandler" @load="addRecordLoadHandler">
                </component>
            </template>
        </RouterView>
        <div class="tab-content">
            <PlanCharts v-if="activetab === 'plan'" :Plandatas="Plandatas" @reap="reapPlanHandler"
                @remove="removePlanHandler" @look="lookPlanHandler" @edit="editPlanHandler" />
            <RecordCharts v-else-if="activetab === 'record'" :Recorddatas="Recorddatas" @look="lookPlanHandler"
                @edit="editPlanHandler" @delete="removeRecordHandler" />
        </div>

        <!-- <el-pagination style="float: right;"  v-model:page-size="pageSize" v-model:pageNum='pageNum'
            :page-sizes="[100, 200, 300, 400]"  
            :total="1" /> -->
    </el-card>
</template>

<script lang='ts' setup>
import { addHarvest, deleteBatch, editHarvest, getRecord } from '@/api/HarvestApi';
import { getPlans } from '@/api/HarvestApi';
import GoReap from '@/components/charts/GoReap.vue';
import PlanCharts from '@/components/charts/PlanCharts.vue';
import RecordCharts from '@/components/charts/RecordCharts.vue';
import type { PlanItems } from '@/interface/harvestInterface';
import { remove } from 'lodash';

import { computed, reactive, ref, watch, watchEffect, type Ref } from 'vue'
import LookCharts from '@/components/charts/LookCharts.vue';
import AddAndEdit from '@/components/charts/AddPlanCharts.vue';
import StatisticsView from '@/components/charts/StatisticsView.vue';
const data: Ref<PlanItems[] | null> = ref(null)
import router from '@/router';
const pageSize:Ref<number>=ref(1)
const totalSize:Ref<number>=ref(1)
const pageNum:Ref<number>=ref(1)
const Plandatas: Ref<PlanItems[]> = ref([])
const Recorddatas: Ref<PlanItems[]> = ref([])
const visible: Ref<boolean> = ref(false)
const show: Ref<boolean> = ref(false)
const show1: Ref<boolean> = ref(false)
const show2: Ref<boolean> = ref(false)
const show3: Ref<boolean> = ref(false)
const activetab = ref<'plan' | 'record'>('plan')
const editData: Ref<PlanItems | null> = ref(null)    //每条单个的数据
const goReapData: Ref<PlanItems | null> = ref(null)
const AddAndEditData: Ref<PlanItems | null> = ref(null)


// 监听一下visible
watch(visible, (value: boolean) => {
    if (!value) {
        editData.value = null
    }
})
watch(show, (value: boolean) => {
    if (!value) {
        goReapData.value = null
    }
})


watchEffect(async () => {
    const result = await getPlans()
    Plandatas.value = result.data.count
    const result2 = await getRecord()
    Recorddatas.value = result2.data.record

})

// 获取计划数据
const getPlansData = async () => {
    const result = await getPlans()
    Plandatas.value = result.data.count

}

// 获取记录数据
const getRecordData = async () => {
    const result = await getRecord()
    Recorddatas.value = result.data.record



}
// 切换tab
const ChangeHandler = (tabValue: 'plan' | 'record') => {
    if (tabValue === 'plan' && Plandatas.value) {
        getPlansData()

    } else if (tabValue === 'record' && Recorddatas.value) {
        getRecordData()
    }
}

// 删除单个数据
const removePlanHandler = async (batch: number) => {
    const result = await deleteBatch(batch)
    if (result.data) {
        getPlansData()
    }
}
const removeRecordHandler = async (batch: number) => {
    const result = await deleteBatch(batch)
    if (result.data) {
        getRecordData()
    }
}

// 点击查看
const lookPlanHandler = (row: PlanItems) => {
    data.value = row
    router.push({ name: 'look' })
}
const lookRecordHandler = () => {

}
// 点击编辑
const editPlanHandler = (row: PlanItems) => {
    router.push({ name: 'edit' })
    data.value = row
    // 传数据最好传成数组
    AddAndEditData.value = { ...row }


}
const originData = {
    batch: '',
    common: '',
    commonRequest: '',
    first: '',
    firstRequest: '',
    food: '',
    id: '',
    people: '',
    place: '',
    second: '',
    secondRequest: '',
    third: '',
    thirdtRequest: '',
    times: '',
    weight: '',
}
// 点击新增用户
const newAddPlanHandler = () => {
    router.push({ name: 'add' })

}




// 点击采收
const reapPlanHandler = (row: PlanItems) => {
    data.value = row
    router.push({ name: 'goReap' })
    // show.value=true
    goReapData.value = row
}

const addPlanSaveHandler = async (tableData1: PlanItems) => {
    let result;
    const isAdd = !AddAndEditData.value
    if (isAdd) {
        result = await addHarvest(tableData1)
        Plandatas.value.push(tableData1)
    } else {
        result = await editHarvest(tableData1)
        if (result.data) {
            const index = Plandatas.value.findIndex(item => item.batch === tableData1.batch)
            if (index !== -1) {
                const updateList = [...Plandatas.value]
                updateList[index] = { ...tableData1 }
                Plandatas.value = updateList
            }
            const index1 = Recorddatas.value.findIndex(ol => ol.batch === tableData1.batch)
            if (index1 !== -1) {
                const updateList1 = [...Recorddatas.value]
                updateList1[index1] = { ...tableData1 }
                Recorddatas.value = updateList1
            }
        }
    }
}

const addRecordLoadHandler = async (tableData2: PlanItems) => {
    let result
    result = await addHarvest(tableData2)
    Recorddatas.value.push(tableData2)


}
</script>

<style lang='scss' scoped>
.box-card {
    overflow: auto;
    width: 98%;
    height: 100%;
    border: 1px solid black;
    position: relative;
    z-index: 1;
    margin-left: 10px;
    margin-top: 10px;
    background: #132E3F;
}

.tab-content {
    position: relative;
    width: 100%;
    height:100%;
    box-sizing: border-box;
    
}

.card-header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 10px;
}

.item {
    margin-bottom: 18px;
}
el-pagination{
    margin-bottom: 30px;
    height: 1px;
}
</style>